<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mini spider 🕷</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            /* margin-bottom: 20px; */
        }
        .button:hover {
            background-color: #2980b9;
        }
        /* 文件列表样式已移除 */
        .qrcode-container {
            text-align: center;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        .qrcode-container img {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            background-color: white;
            padding: 10px;
        }
        .loading {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
        }
        .download-button {
            background-color: #27ae60;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
        .download-button:hover {
            background-color: #229954;
        }
        .notification {
            text-align: center;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
            font-weight: 500;
        }
        .notification.success {
            color: #27ae60;
            background-color: #edf7ef;
            border-left: 4px solid #27ae60;
        }
        .notification.warning {
            color: #f39c12;
            background-color: #fef5e7;
            border-left: 4px solid #f39c12;
        }
        .notification.error {
            color: #e74c3c;
            background-color: #fdedec;
            border-left: 4px solid #e74c3c;
        }
        
        /* 进度条样式 */
        .progress-container {
            width: 100%;
            background-color: #f1f1f1;
            border-radius: 4px;
            margin: 10px 0 20px 0;
            display: none;
        }
        
        .progress-bar {
            height: 24px;
            background-color: #3498db;
            border-radius: 4px;
            width: 0%;
            transition: width 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            font-weight: 500;
        }
        
        .progress-info {
            text-align: center;
            margin-bottom: 5px;
            font-size: 14px;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>mini spider 🕷</h1> 
        
        <!-- 文件路径输入区域 - 始终显示 -->
        <div style="display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;">
            <div style="display: flex; gap: 10px; align-items: center; flex: 1; min-width: 300px;">
                <input type="text" id="file-path-input" placeholder="输入文件或文件夹路径，多个路径用分号(;)分隔" style="flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
                <button id="select-file-by-path" class="button">生成二维码</button>
            </div>
        </div>
        
        <!-- 保存二维码设置 - 必须输入保存路径并自动保存 -->
        <div style="display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center;">
            <div id="save-path-container" style="display: flex; gap: 10px; align-items: center; flex: 1; min-width: 300px;">
                <input type="text" id="save-path-input" placeholder="输入保存二维码的文件夹路径" style="flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;" required>
                <button id="select-save-path" class="button">选择保存路径</button>
            </div>
        </div>
        
        <!-- 文件夹路径过滤设置 -->
        <div style="display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center;">
            <div style="display: flex; gap: 10px; align-items: center; flex: 1; min-width: 300px;">
                <input type="text" id="path-filter-input" placeholder="输入要过滤的文件夹路径，多个路径用分号(;)分隔" style="flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
                <div style="font-size: 14px; color: #7f8c8d; white-space: nowrap;">（指定文件夹下的所有文件将被过滤掉）</div>
            </div>
        </div>
        
        <div id="notification-container" class="notification" style="display: none;"></div>
        
        <!-- 文件列表区域已移除 -->
        
        <div id="loading" class="loading" style="display: none;">正在生成二维码...</div>
        
        <!-- 进度条显示区域 -->
        <div id="progress-container" class="progress-container">
            <div class="progress-info" id="progress-info">准备生成二维码...</div>
            <div class="progress-bar" id="progress-bar">0%</div>
        </div>
        
        <!-- 二维码显示区域（已隐藏，只保留自动保存功能） -->
        <div id="qrcode-container" class="qrcode-container" style="display: none;">
            <img id="qrcode-image" src="" alt="二维码" style="display: none;">
            <button id="download-qrcode" class="download-button" style="display: none;">下载二维码</button>
        </div>
    </div>
    
    <script>
        // 引入Electron的IPC模块
        const { ipcRenderer } = require('electron');
        
        // 获取DOM元素
        const loadingIndicator = document.getElementById('loading');
        const qrcodeContainer = document.getElementById('qrcode-container');
        const qrcodeImage = document.getElementById('qrcode-image');
        const downloadQrcodeBtn = document.getElementById('download-qrcode');
        const notificationContainer = document.getElementById('notification-container');
        const savePathInput = document.getElementById('save-path-input');
        const selectSavePathBtn = document.getElementById('select-save-path');
        const progressContainer = document.getElementById('progress-container');
        const progressBar = document.getElementById('progress-bar');
        const progressInfo = document.getElementById('progress-info');
        
        // 存储选择的文件
        let selectedFiles = [];
        
        // 注意：下方有完整的选择文件夹按钮事件监听器实现
        
        // 解析文件路径按钮点击事件
        document.getElementById('select-file-by-path').addEventListener('click', async () => {
            try {
                // 隐藏之前的通知
                notificationContainer.style.display = 'none';
                
                // 获取输入的文件路径
                const filePathInput = document.getElementById('file-path-input');
                const paths = filePathInput.value.trim();
                
                if (!paths) {
                    showNotification('请输入文件路径', 'warning');
                    return;
                }
                
                // 获取用户输入的过滤关键字
                const pathFilterInput = document.getElementById('path-filter-input');
                const filterKeywords = pathFilterInput.value.trim();
                
                // 显示加载状态和进度条
                loadingIndicator.style.display = 'block';
                progressContainer.style.display = 'block';
                progressBar.style.width = '0%';
                progressBar.textContent = '0%';
                progressInfo.textContent = '准备处理文件...';
                
                // 请求主进程处理文件路径，传递路径和过滤关键字
                selectedFiles = await ipcRenderer.invoke('select-file-by-path', { paths, filterKeywords });
                console.log('文件处理完成，共获取到', selectedFiles.length, '个文件');
                
                // 如果有过滤关键字，显示过滤信息
                if (filterKeywords) {
                    showNotification(`已应用路径过滤，关键字: ${filterKeywords}`, 'info');
                }
                
                // 文件列表已移除，不再更新
                
                // 如果有文件，生成二维码
                if (selectedFiles.length > 0) {
                    generateQRCode(selectedFiles);
                } else {
                    // 隐藏加载和进度条
                    loadingIndicator.style.display = 'none';
                    progressContainer.style.display = 'none';
                    qrcodeContainer.style.display = 'none';
                }
            } catch (error) {
                console.error('解析文件路径时出错:', error);
                showNotification('解析文件路径时出错: ' + error.message, 'error');
                loadingIndicator.style.display = 'none';
                progressContainer.style.display = 'none';
            }
        });
        
        // 监听文件读取开始事件，用于显示分块读取进度
        ipcRenderer.on('file-processing-start', (event, { totalFiles }) => {
            progressInfo.textContent = `开始读取 ${totalFiles} 个文件内容...`;
            progressBar.style.width = '0%';
            progressBar.textContent = '0%';
        });
        
        // 监听进度初始化事件
        ipcRenderer.on('qrcode-progress-init', (event, { totalFiles, totalChunks, isBatchProcessing }) => {
            if (isBatchProcessing) {
                // 如果使用批处理模式，显示批处理相关信息
                progressInfo.textContent = `准备分批次为 ${totalFiles} 个文件生成二维码，共 ${totalChunks} 个分片`;
                showNotification(`文件数量较多，将采用分批处理策略（每10个文件为一组）`, 'info');
            } else {
                // 常规模式
                progressInfo.textContent = `准备为 ${totalFiles} 个文件生成二维码，共 ${totalChunks} 个分片`;
            }
        });
        
        // 监听进度更新事件
        ipcRenderer.on('qrcode-progress-update', (event, progressData) => {
            const { fileName, currentChunk, totalChunks, progress } = progressData;
            progressBar.style.width = `${progress}%`;
            progressBar.textContent = `${progress}%`;
            
            if (totalChunks > 1) {
                progressInfo.textContent = `正在处理: ${fileName} (分片 ${currentChunk}/${totalChunks})`;
            } else {
                progressInfo.textContent = `正在处理: ${fileName}`;
            }
        });
        
        // 监听批次完成事件，用于显示每批处理的进度
        ipcRenderer.on('qrcode-batch-complete', (event, batchInfo) => {
            const { batchIndex, totalBatches, batchSuccessCount, batchErrorCount } = batchInfo;
            // 计算当前批处理的整体进度
            const batchProgress = Math.round((batchIndex / totalBatches) * 100);
            
            // 更新进度条显示当前批处理进度
            progressBar.style.width = `${batchProgress}%`;
            progressBar.textContent = `${batchProgress}%`;
            
            // 显示批次完成信息
            progressInfo.textContent = `批次 ${batchIndex}/${totalBatches} 处理完成，成功: ${batchSuccessCount} 个，失败: ${batchErrorCount} 个`;
            
            // 如果不是最后一批，显示继续处理的提示
            if (batchIndex < totalBatches) {
                showNotification(`批次 ${batchIndex}/${totalBatches} 处理完成，正在准备处理下一批...`, 'success');
            }
        });
        
        // 选择文件夹功能已移除，只保留通过文件路径解析的方式
        
        // 下载二维码按钮点击事件
        downloadQrcodeBtn.addEventListener('click', () => {
            const link = document.createElement('a');
            link.href = qrcodeImage.src;
            link.download = 'code-files-qrcode.png';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
        
        // 选择保存路径按钮点击事件
        selectSavePathBtn.addEventListener('click', async () => {
            try {
                // 请求主进程打开文件夹选择对话框（使用新的IPC事件）
                const result = await ipcRenderer.invoke('select-save-directory');
                
                if (result && result.length > 0) {
                    // 使用第一个选择的文件夹作为保存路径
                    savePathInput.value = result[0];
                }
            } catch (error) {
                console.error('选择保存路径时出错:', error);
                showNotification('选择保存路径时出错: ' + error.message, 'error');
            }
        });
        
        // 保存二维码到文件（强制保存，必须指定路径）
        async function saveQRCode(dataUrl, baseName = 'code_files_qrcode', chunkInfo = null) {
            // 获取用户指定的保存路径
            const savePath = savePathInput.value.trim();
            if (!savePath) {
                throw new Error('请设置保存二维码的文件夹路径');
            }
            
            // 确保chunkInfo存在并有正确的格式
            const validChunkInfo = chunkInfo || {};
            console.log('保存二维码，文件序号:', validChunkInfo.fileIndex, '分片信息:', {
                isSplit: validChunkInfo.isSplit,
                chunkIndex: validChunkInfo.chunkIndex,
                totalChunks: validChunkInfo.totalChunks
            });
            
            return new Promise((resolve, reject) => {
                // 发送保存请求到主进程，包含保存路径
                ipcRenderer.invoke('save-qrcode', {
                    dataUrl: dataUrl,
                    savePath: savePath,
                    baseName: baseName,
                    chunkInfo: validChunkInfo
                }).then(result => {
                    if (result.success) {
                        console.log('二维码保存成功:', result.filePath);
                        resolve(result.filePath);
                    } else {
                        reject(new Error(result.error || '保存失败'));
                    }
                }).catch(error => {
                    console.error('保存二维码失败:', error);
                    reject(error);
                });
            });
        }
        
        // 保存路径输入区域始终显示，无需控制显示/隐藏
        
        // 文件列表更新函数已移除
        
        // 生成二维码（为每个文件单独生成并强制保存，如果内容过大则分片生成多个）
        async function generateQRCode(files) {
            try {
                // 首先检查保存路径是否已设置
                let savePath = savePathInput.value.trim();
                if (!savePath) {
                    showNotification('请设置保存二维码的文件夹路径', 'error');
                    loadingIndicator.style.display = 'none';
                    progressContainer.style.display = 'none';
                    return;
                }
                
                // 预处理保存路径 - 确保路径格式正确
                savePath = savePath.replace(/\\/g, '/');
                console.log('[关键步骤] 预处理后的保存路径:', savePath);
                
                // 预处理目标文件夹 - 确保文件夹存在
                console.log('[关键步骤] 开始预处理目标文件夹:', savePath);
                try {
                    // 通过IPC调用确保目标文件夹存在
                    await ipcRenderer.invoke('ensure-directory', savePath);
                    console.log('[关键步骤] 目标文件夹预处理完成，确保存在');
                } catch (err) {
                    console.error('[关键步骤] 目标文件夹预处理失败:', err.message);
                    showNotification('无法创建或访问目标文件夹: ' + err.message, 'error');
                    loadingIndicator.style.display = 'none';
                    progressContainer.style.display = 'none';
                    return;
                }
                
                // 文件已在主进程中进行过滤，直接使用
                // 如果没有文件，直接返回
                if (files.length === 0) {
                    showNotification('没有符合条件的文件可生成二维码', 'warning');
                    loadingIndicator.style.display = 'none';
                    progressContainer.style.display = 'none';
                    return;
                }
                
                // 过滤文件数据，只发送需要的信息
                const filesToEncode = files.map(file => ({
                    name: file.name,
                    path: file.path,
                    content: file.content
                }));
                
                // 请求主进程为每个文件生成二维码，传递文件数组和保存路径
                const result = await ipcRenderer.invoke('generate-qrcode', { files: filesToEncode, savePath: savePath });
                
                if (result.success) {
                    // 显示总体成功消息
                    showNotification(result.message, 'success');
                    
                    // 为每个成功生成的二维码保存到文件
                    if (result.results && result.results.length > 0) {
                        let saveSuccessCount = 0;
                        let saveErrorCount = 0;
                        let firstError = null;
                        
                        // 按文件名和分片索引组织结果，确保同一文件的所有分片使用相同的序号
                        const fileResults = {};
                        const qrResultsByFile = {};
                        
                        // 首先获取下一个可用的序号
                        let nextFileIndex = await ipcRenderer.invoke('get-next-file-index', savePath);
                        
                        // 按文件分组结果
                        result.results.forEach(qrResult => {
                            const key = qrResult.fileName;
                            if (!qrResultsByFile[key]) {
                                qrResultsByFile[key] = [];
                            }
                            qrResultsByFile[key].push(qrResult);
                        });
                        
                        // 为每个文件分配序号并保存所有分片
                        for (const [fileName, fileQRResults] of Object.entries(qrResultsByFile)) {
                            // 对当前文件的所有分片按索引排序
                            fileQRResults.sort((a, b) => {
                                if (!a.chunkIndex) return -1;
                                if (!b.chunkIndex) return 1;
                                return a.chunkIndex - b.chunkIndex;
                            });
                            
                            // 为当前文件分配序号（从1开始）
                            const fileIndex = nextFileIndex; // 注意这里不再递增，在循环结束后递增
                            console.log(`为文件 ${fileName} 分配序号: ${fileIndex}`);
                            
                            // 保存该文件的所有分片
                            console.log(`=== 开始处理文件 ${fileName} 的 ${fileQRResults.length} 个分片 ===`);
                            for (let i = 0; i < fileQRResults.length; i++) {
                                const qrResult = fileQRResults[i];
                                console.log(`[分片${i+1}/${fileQRResults.length}] 开始处理分片 ${qrResult.chunkIndex || '不分片'}，文件序号: ${fileIndex}`);
                                // 即使分片生成失败，也记录下来
                                if (!qrResult.success) {
                                    console.log(`[分片${i+1}/${fileQRResults.length}] 分片生成失败: ${qrResult.error}`);
                                }
                                if (qrResult.success) {
                                    try {
                                        console.log(`准备保存文件 ${qrResult.fileName} 的二维码，序号: ${fileIndex}` + 
                                            (qrResult.isSplit ? `，分片 ${qrResult.chunkIndex}/${qrResult.totalChunks}` : ''));
                                        
                                        // 准备分片信息，包含文件序号和原始文件名
                                        const chunkInfo = qrResult.isSplit ? {
                                            isSplit: true,
                                            chunkIndex: qrResult.chunkIndex,
                                            totalChunks: qrResult.totalChunks,
                                            fileIndex: fileIndex,
                                            originalFileName: fileName
                                        } : {
                                            fileIndex: fileIndex,
                                            originalFileName: fileName
                                        };
                                        
                                        // 详细日志记录
                                        console.log(`[关键步骤] 准备保存文件 ${fileName} 的二维码`);
                                        console.log(`[关键步骤] 保存路径: ${savePath}`);
                                        console.log(`[关键步骤] 文件序号: ${fileIndex}`);
                                        console.log(`[关键步骤] 分片信息:`, chunkInfo);
                                        console.log(`[关键步骤] 二维码数据URL长度: ${qrResult.dataUrl ? qrResult.dataUrl.length : 0}`);
                                        
                                        // 传入空字符串作为baseName，在主进程中会根据序号和分片信息生成文件名
                                        console.log(`[关键步骤] 调用save-qrcode保存分片 ${qrResult.chunkIndex}`);
                                        const saveResult = await ipcRenderer.invoke('save-qrcode', {
                                            dataUrl: qrResult.dataUrl,
                                            savePath: savePath,
                                            baseName: '',
                                            chunkInfo: chunkInfo
                                        });
                                        console.log(`[关键步骤] 分片 ${qrResult.chunkIndex} 保存结果:`, saveResult);
                                        saveSuccessCount++;
                                        console.log(`[关键步骤] 保存成功计数: ${saveSuccessCount}`);
                                    } catch (saveError) {
                                        console.error(`保存 ${qrResult.fileName} 的二维码时出错:` + 
                                            (qrResult.isSplit ? ` 分片 ${qrResult.chunkIndex}` : ''), saveError);
                                        saveErrorCount++;
                                        if (!firstError) firstError = saveError.message;
                                    }
                                } else {
                                    // 显示单个文件生成失败的错误
                                    const errorMessage = qrResult.chunkIndex 
                                        ? `文件 ${qrResult.fileName} 分片 ${qrResult.chunkIndex}: ${qrResult.error} - ${qrResult.details}`
                                        : `文件 ${qrResult.fileName}: ${qrResult.error} - ${qrResult.details}`;
                                    showNotification(errorMessage, 'error');
                                }
                            }
                            
                            // 文件处理完毕，递增序号用于下一个文件
                            nextFileIndex++;
                        }
                        
                        // 显示保存结果汇总
                        if (saveErrorCount > 0) {
                            showNotification(`二维码保存完成，成功: ${saveSuccessCount} 个，失败: ${saveErrorCount} 个。第一个错误: ${firstError}`, 'warning');
                        } else {
                            showNotification(`二维码保存完成，全部成功: ${saveSuccessCount} 个`, 'success');
                        }
                    }
                } else {
                    // 显示整体错误信息
                    showNotification(result.error + ': ' + result.details, 'error');
                }
            } catch (error) {
                console.error('生成二维码时出错:', error);
                showNotification('生成二维码时出错: ' + error.message, 'error');
            } finally {
                // 隐藏加载状态和进度条
                loadingIndicator.style.display = 'none';
                progressContainer.style.display = 'none';
            }
        }
        
        // 显示通知信息
        function showNotification(message, type = 'success') {
            // 移除所有类型类
            notificationContainer.className = 'notification';
            // 添加指定类型类
            notificationContainer.classList.add(type);
            
            notificationContainer.textContent = message;
            notificationContainer.style.display = 'block';
            
            // 根据通知类型设置自动隐藏时间
            if (type === 'success') {
                setTimeout(() => {
                    notificationContainer.style.display = 'none';
                }, 5000);
            } else if (type === 'info' || type === 'warning') {
                setTimeout(() => {
                    notificationContainer.style.display = 'none';
                }, 8000);
            }
            // 错误消息不会自动隐藏，需要用户主动处理
        }
    </script>
</body>
</html>